<template>
	<view class="page">
		
		<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="top-icon" @click="back">
				<!-- <image class="img"
					src=""
					mode="aspectFill"></image> -->
			    <u-icon name='arrow-left' size="42rpx" color="#fff"></u-icon>				
			</view>
			<view class="top-title c-primary">评论列表</view>
		</view>
		<view class="flex_r fj_a fa_c topbom" :style="`margin-top:`+tophigh+ `px`">
			<view style="width: 150rpx;">
				<view class="flex_r">
					<uni-rate class="fa_c" style="line-height: 80rpx;" size='20px' readonly='false' value='1'
						max='1'></uni-rate>
					<text class="text_44 fa_c" style="line-height: 30rpx;">{{score}}</text>
				</view>
				<text class="text_26 " style="color: gray; ">共{{onlinestatus}}条评论</text>
			</view>
			<view>
				<view class="flex_r" style="margin-top: 20rpx;">
					<text class="text_22 " style="color: gray; ">熟悉景点 {{score}}</text>
					<uni-rate allowHalf='true' style="margin-left: 20rpx;" size='20px' readonly='false'
						:value="score"></uni-rate>
				</view>
				<view class="flex_r" style="margin-top: 20rpx;">
					<text class="text_22 " style="color: gray; ">服务态度 {{score}}</text>
					<uni-rate allowHalf='true' style="margin-left: 20rpx;" size='20px' readonly='false'
						:value="score"></uni-rate>
				</view>
				<view class="flex_r" style="margin-top: 20rpx;">
					<text class="text_22 " style="color: gray; ">导游专业 {{score}}</text>
					<uni-rate allowHalf='true' style="margin-left: 20rpx;" size='20px' readonly='false'
						:value="score"></uni-rate>
				</view>
			</view>
		</view>
		<text class="text_30 bold_" style="color: black; margin-left: 20rpx; color: white;">全部评论</text>
		<view class="flex_c" v-for="(item,index) in datalist">
			<view class="flex_r">
				<view class="flex_r fj_a fa_c"
					style="width:100rpx;height: 100rpx; margin-left: 20rpx;margin-top: 20rpx;  background-color: #878D98; border-radius: 50rpx;">
					<text class="text_44 bold_" style="color: white;">匿</text>
				</view>
				<view class="flex_c" style="width: 610rpx;">
					<view class="" style="display: flex;justify-content: space-between;">
						<text class="text_30 bold_"
							style="color: black; margin-left: 20rpx;margin-top: 20rpx;color: white;">匿名</text>
						<text class="text_24 "
							style="color: lightgrey; margin-right: 20rpx;margin-top: 20rpx;">{{item.createtime}}</text>
					</view>
					<view class="flex_r" style="margin-top: 15rpx;">
						<uni-rate allowHalf='true' style="margin-left: 20rpx;" size='16px' readonly='false'
							:value="item.score"></uni-rate>
						<text class="text_30 bold_"
							style="color: #ffca3e; line-height: 30rpx;margin-left: 10rpx;">{{item.score}}</text>
						<text class="text_22 "
							style="color: lightgrey; margin-left: 20rpx; line-height: 30rpx;">技术{{item.score}}</text>
						<text class="text_22 "
							style="color: lightgrey; margin-left: 20rpx;line-height: 30rpx;">服务{{item.score}}</text>
						<text class="text_22 "
							style="color: lightgrey; margin-left: 20rpx;line-height: 30rpx;">声音{{item.score}}</text>
					</view>
					<text class="text_26 " style="color: black; margin-left: 20rpx;margin-top: 20rpx;color: white;">{{item.message}}</text>
				</view>
			</view>
		    <view class="line"></view>
		</view>

	</view>

</template>

<script>
	import {
		to
	} from '@/utils/index.js';


	export default {
		data() {
			return {
				$c: this.$c,
				pageno: 1,
				list: [],
				refresherTriggered: false,
				datalist: [],
				tophigh: 0,
				userid: 0,
				score: '',
				onlinestatus: 0,
				tripId: 0,
			}
		},
		onLoad(option) {
			this.tophigh = this.$store.state.StatusBar.statusBar + 31;
			this.tripId = option.tripId;
			this.score = option.score;
			this.onlinestatus = option.onlinestatus;

			console.log(option)
			this.getData();
		},
		methods: {
			to,
			back() {
				to()
			},
			async getData() {
				let res = await this.$c.post('/app/newTrip/listTripComment?tripId=' + this.tripId)
				if (res.code != 0) {
					uni.navigateTo({
						url: '/im/login/login'
					});
				} else {
					this.datalist = this.datalist.concat(res.data)
				}
				console.log(this.datalist);

			},



		}




	}
</script>

<style>
	.page {
		
		width: 100%;
		height: 100vh;
		/* background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff); */
	}

	.top {
		
		top: 0rpx;
		width: 100%;
	
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx;
	}

	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}

	.top-title {
		line-height: 50rpx;
		display: block;
		height: 50rpx;
		z-index: 99;
	}

	.topbom {
		height: 250rpx;
		background-color: rgba(246, 246, 246, 0.1);
		border-radius: 20rpx;
		margin: 20rpx auto;
		width: calc(100% - 40rpx);
	}
	.line{
		margin-left: 20rpx;
		margin-top: 20rpx;
	    width: calc(100% - 40rpx);
		height: 1rpx;		
		background-color: lightgray;		
	}
</style>